<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">

		<title>Reportes</title>

		<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

		<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
		<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

		<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

		<script src="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script>

		<link  href="../css/bootstrap.min.css" rel="stylesheet">

		<link  href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css" rel="stylesheet">

		<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

		<script src="../js/datatable.js"></script>
		<script src="../js/datepicker.js"></script>
	</head>

	<body>
		<div class="container">

			<h1><i class="fa fa-pie-chart"></i>Reportes</h1>
			<hr />

			<div class="panel panel-info">
				<div class="panel-heading">
					<h3 class="panel-title">Reportes de Ordenes de Compra y Pecosas</h3>
				</div>
				<div class="panel-body">
					<form class="form-horizontal">

						<div class="form-group">
							<label for="select" class="col-lg-2 control-label">Seleccione el tipo de Reporte</label>
							<div class="col-lg-10">
								<select class="form-control" id="select">
									<option>Ordenes de Compra que han sido Registradas en Tarjeta de Control Visible en un Intervalo de Tiempo</option>
									<option>Pecosas Generadas en un Intervalo de Tiempo</option>
									<option>Ordenes de Compra Rechazadas en un Intervalo de Tiempo</option>
									<option>Productos Recepcionados en un Intervalo de Tiempo</option>
									<option>Ordenes de Compra Recepcionadas y Aceptadas en el Almacen en un Intervalo de Tiempo</option>
									<option>Ordenes de Compra que estan Incompletas en un Intervalo de Tiempo</option>
									<option>Ordenes de Compra que estan Pendientes en un Intervalo de Tiempo</option>
								</select>
							</div>
						</div>
					</form>
				</div>

				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title">Ordenes de Compra que han sido Registradas en Tarjeta de Control Visible en un Intervalo de Tiempo</h3>
					</div>
					<div class="panel-body">

						<div class="panel panel-info">
							<div class="panel-heading">
								<h3 class="panel-title">Parámetros Para el Reporte</h3>
							</div>
							<div class="panel-body">
								<form  class="form-horizontal">
									<div class="form-group">
										<label for="fechaInicio" class="col-lg-2 control-label">Fecha Inicio</label>
										<div class="col-lg-10">
											<input type="text" class="form-control" id="fechaInicio" placeholder="Fecha de Inicio">
										</div>
									</div>

									<div class="form-group">
										<label for="fechaFin" class="col-lg-2 control-label">Fecha Fin</label>
										<div class="col-lg-10">
											<input type="text" class="form-control" id="fechaFin" placeholder="Fecha Fin">
										</div>
									</div>
									<div class="form-group">
										<div class="col-lg-10 col-lg-offset-2">

											<button type="submit" class="btn btn-primary">
												Generar Reporte
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
						<div class="panel panel-info">
							<div class="panel-heading">
								<h3 class="panel-title">Ordenes de Compra</h3>
							</div>
							<div class="panel-body">
								<form  class="form-horizontal"></form>
							</div>
							<table id="tabla" class="display" cellspacing="0" width="100%">
								<thead>
									<tr>
										<th>N°</th>
										<th>Proveedor</th>
										<th>Fecha Pedido</th>
										<th>Fecha Entrega</th>
										<th>Preparado Por</th>
										<th>N° de Tarjeta de Control</th>
									</tr>
								</thead>

								<tfoot>
									<tr>
										<th>N°</th>
										<th>Proveedor</th>
										<th>Fecha Pedido</th>
										<th>Fecha Entrega</th>
										<th>Preparado Por</th>
										<th>N° de Tarjeta de Control</th>
									</tr>
								</tfoot>

								<tbody>
									<tr>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
									</tr>
									<tr>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
									</tr>
									<tr>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
									</tr>
									<tr>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
									</tr>
									<tr>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
									</tr>
									<tr>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
									</tr>
									<tr>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
									</tr>
									<tr>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
										<td>xxxxx</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>

			</div>

		</div>
		<!-- /container -->
	</body>
</html>